// pages/foodDiary/foodDiary.js
import * as echarts from '../../ec-canvas/echarts';
var app = getApp();

/**
 * 日期选择器
 */


Page({
	data: {
		//加载热量趋势图
		ec: {
			lazyLoad: true
		},
		//日期数组，每个元素都是一个对象，共有21个元素	{day: 10, month: 11, week: "二", year: 2020}
		dayList: [],
		// 一天的毫秒数
		millisecond: 86400000,
		// 生命周期函数中设置为 view7，用来控制 scroll-view 的滑动，滑动到指定项（该项的id和intoView的值相同）
		intoView: '',
		// 当前项的下标，初始值是7。从0开始，“今天”之前有7天，所以“今天”的下标是7
		currentIndex: 7,
		// 选中的日期(用户通过点击上面的按钮)
		selectedDay: {},
		currentMealList: [],
		// 滑动动画时长
		duration: 500,
		// swiper里面的数据,是一个对象数组。每一个元素都代表一条记录。 
		/*
			所有的代办事项，是一个数组，每一个元素依旧是一个数组。任何里面的每一个元素就是一个对象，代表一条代办记录
			{gmtCreate: 1605023745000, gmtModify: 1605023750000, id: 1, importance: 1, isFinished: 0,remark: "测试备注",timeFlag: 1 title: "微信小程序" uId: 1}
		*/
		targetList: [],
		holdChoosePicPath: "https://lhzx.eos-hunan-1.cmecloud.cn/2024-12-4-1733289243147微信截图_20241204131339.png",
		showDialogIndex: 0,
		// swiper的高度
		widHeight: 350,
		// 用户id，页面加载时从全局 globalData 中获取
		uid: "1",
		// // 完成按钮图标对应的 url： ../../icon/target.png   或者  ../../icon/target_ok.png
		// imageUrl: "",
		// iconClass: ""
	},
	/**
	* 热量趋势图
	*/
	initChart(xdata, ydata, markLine) {
		let ec_canvas = this.selectComponent('#myChart');
		ec_canvas.init((canvas, width, height, dpr) => {
			const chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr //像素
			})
			canvas.setChart(chart);
			//配置项
			var option = {
				title: {
					show: true,
					text: "近9日热量摄入趋势图",
					left: "70px",
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					name: '日期',
					nameLocation: 'middle',
					nameGap: 28,
					nameTextStyle: {
						fontSize: '14px',
						fontWeight: 'bold',
						padding:[0,0,0,240]
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed' // 设置虚线类型
						}
					},
					data: xdata,
					axisLabel: {
						show: true,
					},
				},
				yAxis: {
					type: 'value',
					name: '热量（kcal）',
					nameTextStyle: {
						fontSize: '14px',
						fontWeight: 'bold'
					},
				},
				grid: {
					left: '15%',
					right: '10%',
					top: '25%',
				},
				series: [
					{
						data: ydata,
						smooth: true,
						type: 'line',
						symbol: 'circle',
						symbolSize: 8,
						itemStyle: {
							borderWidth: 2,
							borderColor: 'orange',
							color: 'orange'
						},
						lineStyle: {
							color: 'red',
							width: 3
						},
						areaStyle: {
							opacity: 0.2,
							color: 'orange'
						},
						markLine: {
							symbol: 'none',
							data: [
								{
									yAxis: markLine,//设置最佳热量值
									lineStyle: {
										color: '#198565',
										width: 2
									},
									label: {
										show: true,
										formatter: '最佳摄入热量值',
										color: '#198565',
										position: 'insideEndBottom',
										fontWeight: 'bolder',
									},
									symbol: 'none',
								}
							]
						},
					}
				]
			};
			chart.setOption(option);
		});
	},
	clickTargetItem: function (e) {
		console.log("clickItem");
		console.log(e.currentTarget.dataset);
		this.setData({
			"message": e.currentTarget.dataset
		})
		console.log("本条记录的id为：", e.currentTarget.dataset.id);
		console.log(this.data.targetList[this.data.currentIndex]);
	},
	// 中部 swiper 滑动触发的点击事件
	siwperChange: function (e) {


		// console.log(e.detail);
		// 1. 设置 data 中的 index 的值，然后上面的日历部分的index也会改变。这样上面日历部分和下面的swipper部分就可以同步
		this.setData({
			"currentIndex": e.detail.current
		})
		// 2. 重新设置 siwper 的高度（先更改 currentIndex，然后在设置对应 siwper 的高度）
		// console.log("slide");
		// console.log(this.data.targetList);
		// console.log("currentIndex", this.data.currentIndex);
		// console.log(this.data.targetList[this.data.currentIndex].length);
		// console.log("myheight", myHeight);

		var myHeight = this.data.targetList[this.data.currentIndex].length * 135 + 3 * 70 + 176 + 100;


		wx.getSystemInfo({
			success: (result) => {
				console.log("页面高度", result.screenHeight);
				if (myHeight < result.screenHeight) {
					myHeight = result.screenHeight;
				}
			},
		});

		// 设置页面高度和当前选择的日期
		this.setData({
			'widHeight': myHeight,
			"selectedDay": this.data.dayList[e.detail.current]
		})

	},
	// 获取单日餐饮记录
	getDayData() {
		this.setData({
			currentMealList: [
				{
					"time": "11:25",
					"text": "汉堡 1份\n可乐 1杯",
					"imgUrl": "http://szxh.oss-cn-beijing.aliyuncs.com/test/food/imagec854eded-5b8e-468c-a334-881927047bf9.jpg"
				},
				{
					"time": "13:01",
					"text": "咖啡 1杯",
					"imgUrl": "http://szxh.oss-cn-beijing.aliyuncs.com/test/food/image12e03594-b53b-45c9-a483-8a15a93890d1.jpg"

				},
				{
					"time": "19:38",
					"text": "大盘鸡面 1份\n羊肉串 1串",
					"imgUrl": "http://szxh.oss-cn-beijing.aliyuncs.com/test/food/image0aadd576-f77b-4922-9579-8873ef3d4320.jpg"
				}
			]
		})
		return
		console.log(this.data.selectedDay);
		let currentDay = this.data.selectedDay.year + "-" +
			this.data.selectedDay.month + "-" + this.data.selectedDay.day;
		wx.request({
			url: app.globalData.url + 'food/getRecipe',
			method: "POST",
			data: {
				"dayStr": currentDay,
			},
			success: res => {
				console.log("请求成功！")
				console.log(res);
				let dataList = res.data.data;
				if (dataList != null && dataList.length > 0) {
					this.setData({
						currentMealList: res.data.data[0].mealList
					})
				}
			}
		});

	},
	getHeatMap() {
		//1. 根据日期获取底部热力图
		// http://123.249.71.91:8031/food/getHeatmap
		wx.request({
			url: app.globalData.url + 'food/getHeatmap',
			method: "POST",
			data: {
				"uid": this.data.uid,
			},
			success: res => {
				console.log("请求成功！")
				console.log(res);
				let dataList = res.data.data;
				if (dataList != null && dataList.length > 0) {
					let xdata = dataList[0].xdata;
					let ydata = dataList[0].ydata;
					let markLine = dataList[0].markLine;
					console.log(this.data.ec.onInit);
					this.initChart(xdata, ydata, markLine);
				}
			}
		});

	},
	// 点击日历上面的日期
	clickDate: function (event) {
		console.log(event.currentTarget.dataset);
		let index = event.currentTarget.dataset.index;
		console.log(this.data.dayList[index]);
		// 设置数组下标
		this.setData({
			'intoView': "view" + (index - 2),
			'currentIndex': event.currentTarget.dataset.index,
			'selectedDay': this.data.dayList[index]
		})
		console.log(this.data.intoView);
		this.getDayData();
		// 更改用户选中的日期，然后在页面中渲染选中的日期
		// this.setData({
		// 	"selectedDay": this.data.dayList[event.currentTarget.dataset.index]
		// })
		// this.onPullDownRefresh()
	},

	// 封装的 js 函数，生成一个 dayList，里面有最近3个礼拜的日期信息
	weekDate: function () {

		var dayList = [];

		// 获取当前时间对应的 date 对象
		var myDate = new Date();

		// 因为要最近3个礼拜的日期信息，可能涉及到月份的变化所以不能简单的对天数加1或者减1，可以先计算出毫秒数，然后转换为日期
		var millisecond = myDate.getTime();

		// 为 "上一个礼拜的时间" 加入 dayList 中
		for (var i = 7; i > 0; i--) {
			// 根据毫秒数构造一个 Date 对象
			var tempDate = new Date(millisecond - i * this.data.millisecond);

			dayList.push({
				'day': tempDate.getDate(),
				'month': tempDate.getMonth() + 1,
				'week': this.toWeekDay(tempDate.getDay()),
				'year': tempDate.getFullYear()
			});
		}

		// 将 “今天” 加入 dayList 中
		dayList.push({
			'day': myDate.getDate(),
			'month': myDate.getMonth() + 1,
			'week': this.toWeekDay(myDate.getDay()),
			'year': myDate.getFullYear()
		})


		// 将 “未来2周” 加入 dayList 中
		for (var i = 1; i <= 13; i++) {
			var tempDate = new Date(millisecond + i * this.data.millisecond);
			dayList.push({
				'day': tempDate.getDate(),
				'month': tempDate.getMonth() + 1,
				'week': this.toWeekDay(tempDate.getDay()),
				'year': tempDate.getFullYear()
			})
		}

		return dayList;
	},

	// 传入数据  讲一周的某一天返回成中文状态下的字符
	toWeekDay: function (weekDay) {
		switch (weekDay) {
			case 1:
				return '一';
				break;
			case 2:
				return '二';
				break;
			case 3:
				return '三';
				break;
			case 4:
				return '四';
				break;
			case 5:
				return '五';
				break;
			case 6:
				return '六';
				break;
			case 0:
				return '日';
				break;
			default:
				break;
		}
		return '传入未知参数';
	},
	choosePicture() {
		wx.chooseImage({
			count: 1,
			sourceType: ['album']
		}).then(res => {
			const tempFilePaths = res.tempFilePaths;
			console.log(tempFilePaths)
			// this.uploadFileList(tempFilePaths)
			this.setData({
				showDialogIndex: '6',
				holdChoosePicPath: tempFilePaths[0]
			})
		})
	},
	closeOnePopup() {
		this.setData({
			showDialogIndex: '0',
			holdChoosePicPath: ''
		})
	},
	evaluateSubmit() {
		this.setData({
			showDialogIndex: '0',
		})
	},
	chooseCamera() {
		wx.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['camera'],
		}).then(res => {
			const tempFilePaths = res.tempFilePaths;
			console.log(tempFilePaths)
			//分开上传图片
			// this.uploadFileList(tempFilePaths);
			this.setData({
				showDialogIndex: '6',
				holdChoosePicPath: tempFilePaths[0]
			})
		})
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {

		// 加载数据，调用封装的方法
		this.loadingData();
		this.getHeatMap();
	},

	// 生命周期函数：用户下拉刷新
	onPullDownRefresh: function () {
		console.log("refresh");

		// 加载数据，调用封装的方法
		this.loadingData();
	},

	// 封装出来的加载数据的函数
	loadingData: function () {
		//本地调试暂时关闭loading
		// wx.showLoading({
		// 	title: '加载中',
		// })

		// 1. 获取最近3周的日期信息，存入 this.data 中
		var dayList = this.weekDate();
		// 通过 scroll-into-view 设置一开始的位置
		this.setData({
			"dayList": dayList,
			"intoView": "view5"
		});

		// 1.1 设置当前选中的日期
		this.setData({
			"selectedDay": this.data.dayList[7]
		})
		this.getDayData();
		// 2. 从 globalData 中获取用户openid
		// var app = getApp();
		// this.setData({
		// 	"uid": wx.getStorageSync('openid')
		// })
		// 2. 获取代办事项信息，根据用户id获取
		// 向后端服务器发送请求
		// 将当前的日期发送给后端服务器
		var myDate = new Date();
		var millisecond = myDate.getTime();
		var that = this;
		var myHeight = 250;
		wx.getSystemInfo({
			success: (result) => {
				console.log("页面高度", result.screenHeight);
				if (myHeight < result.screenHeight - 250) {
					myHeight = result.screenHeight - 250;
				}
			},
		})

		this.setData({
			'winHeight': myHeight,
		})

		// wx.request({
		// 	url: app.globalData.url + 'api/wx/getTargetByUserId',
		// 	method: "GET",
		// 	data: {
		// 		"uid": this.data.uid,
		// 		"millisecond": millisecond,
		// 		"currentIndex": this.data.currentIndex
		// 	},
		// 	success: res => {
		// 		console.log("请求成功！")
		// 		console.log(res.data.length);
		// 		// 设置待办事项，同时设置 swiper 的高度
		// 		// “今天” 对应的 swiper-item 下标是7，所以选择数组第7个元素
		// 		var myHeight = res.data.length * 70 +250;
		// 		console.log(myHeight);
		// 		//console.log("今天的代办事项有:", res.data[7].length)
		// 		//console.log("myheight", myHeight);
		// 		// 为了让 swiper 能够覆盖整个页面（只有这样，按住其他地方进行滑动时，也可以成功的滑动 siwpper）
		// 		/*
		// 			判断 myHeight 的高度
		// 			为了让 swiper 能够覆盖整个页面（只有这样，按住其他地方进行滑动时，也可以成功的滑动 siwpper）
		// 		*/
		// 		// 隐藏提示框
		// 		wx.hideLoading();
		// 		// 停止下拉刷新
		// 		wx.stopPullDownRefresh()
		// 	}
		// })
	},

})
